<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web聊天室</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 使用vue框架构建  -->
    <div id="app" v-cloak>
        <form @submit.prevent="register()">
            <h3>聊天室注册</h3>
            <div class="row">
                <span>用户名</span>
                <!-- required 表示必须填写 -->
                <input type="text" v-model="username" required>
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" v-model="password" required>
            </div>
            <div class="row">
                <span>昵称</span>
                <input type="text" v-model="nickname" required>
            </div>
            <div class="row">
                <span>头像</span>
                <!-- 绑定文件选择文件 改变原始数据添加新数据的改变事件  $event是vue的事件 -->
                <input type="file" accept="image/*" @change="showHead($event)">
                <img :src="head.src" v-if="head.src">
            </div>
            <div class="error-message">{{ errorMessage }}</div>
            <div class="row">
                <input type="submit" value="注册">
            </div>
            <div class="row-right">
                <a href="../index.html">返回登录</a>
            </div>
        </form>
    </div>
</div>
</body>
<script src="../js/util.js"></script>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            errorMessage: "",
            username: "",
            password: "",
            nickname: "",
            head: {
                file: "",//保存选择的文件
                src: "",//选择好图片还没上传，客户端本地有一个图片地址
            },
        },
        methods: {
            //注册选择头像，显示预览图片
            //e是传入的事件对象
            showHead: function (e){
                //获取选择的文件: 文件控件可以配置为选择多个文件
                //e事件对象.target可以获取到事件发生的dom元素
                let headFile = e.target.files[0];
                //先保存
                app.head.file = headFile;
                //生成图片url（客户端本地的）
                app.head.src = URL.createObjectURL(headFile);
            },
            register: function (){
                //注册功能
                //使用FormData对象来作为form-data格式上传的数据
                let formData = new FormData();
                //添加数据：append(key, value), key为请求数据form-data中的键
                formData.append("username", app.username);
                formData.append("password", app.password);
                formData.append("nickname", app.nickname);
                if(app.head.file){
                    formData.append("headFile", app.head.file);
                }
                ajax({
                    method: "post",
                    //当前html位置是在/views/register.html
                    url: "../register",//当前html是在/views/register.html
                    //上传文件，使用form-data格式，但是不能设置这个Content-Type
                    //body中放置的信息 上传文件使用的form-data格式
                    body: formData,
                    //返回响应
                    callback: function(status, responseText){
                        //表示服务器返回的相应状态码出错
                        // console.log(responseText);//查看一下响应正文的数据是否符合业务的，可以抓包（建议）
                        if(status != 200){
                            alert("出错了，响应状态码："+status);
                            return;
                        }
                        //表示正常返回200 就进行接下来的操作
                        //响应正文的地方
                        let body = JSON.parse(responseText);//响应正文
                        if(body.ok){
                            alert("注册成功");
                            //跳转到登陆的页面
                            window.location.href = "../index.html";
                        }else{
                            // //注册失败 显示错误，根据后端的reason反馈信息
                            app.errorMessage = body.reason;
                    }
                }
            });
            }
        },
    });
</script>
</html>